<!--
 * @Author: 吴世扬 18368095041@163.com
 * @Date: 2024-07-26 08:32:36
 * @LastEditors: 吴世扬 18368095041@163.com
 * @LastEditTime: 2024-08-23 08:44:05
 * @FilePath: /vue3-uniapp/src/components/ui/CustomTabbar/CustomTabbar.vue
-->
<script lang="ts" setup>
import type { TabbarSwitchBeforeSwitchFunc } from '@tuniao/tnui-vue3-uniapp/components/tabbar/src/tabbar';

import type { RouteOption } from '@/typings/declaration/uvUi';
import { useUserStore, useAppStore } from '@/store';
import { onShow } from '@dcloudio/uni-app';

const props = defineProps<{
    modelValue: string;
}>();
const { modelValue } = toRefs(props);

const { cssVarObject } = storeToRefs(useAppStore());

const tabbarList = ref([
    {
        name: '首页',
        icon: 'home',
        activeIcon: 'home-fill',
        route: {
            type: 'switchTab',
            url: '/pages/tabbar/HomeView/HomeView'
        },
        roles: []
    },
    {
        name: '办结审批',
        icon: 'menu-sort',
        activeIcon: 'menu-sort-fill',
        route: {
            type: 'switchTab',
            url: '/pages/tabbar/TodoOrderList/TodoOrderList'
        },
        roles: [19, 20, 21, 22]
    },
    {
        name: '待办',
        icon: 'menu-sort',
        activeIcon: 'menu-sort-fill',
        route: {
            type: 'switchTab',
            url: '/pages/tabbar/TodoOrderList/TodoOrderList'
        },
        roles: [2, 3, 4, 5, 6, 7, 8, 9, 10, 12, 13, 15, 16, 17, 18, 24]
    },
    {
        name: '辖区',
        icon: 'location',
        activeIcon: 'location-fill',
        route: {
            type: 'switchTab',
            url: '/pages/tabbar/AreaOrderList/AreaOrderList'
        },
        roles: [2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 13, 17, 18, 19, 20, 24]
    },
    {
        name: '部门',
        icon: 'location',
        activeIcon: 'location-fill',
        route: {
            type: 'switchTab',
            url: '/pages/tabbar/DepartmentOrderList/DepartmentOrderList'
        },
        roles: [12, 16, 21, 22, 23]
    },
    {
        name: '与我相关',
        icon: 'my',
        activeIcon: 'my-fill',
        route: {
            type: 'switchTab',
            url: '/pages/tabbar/MyOrderList/MyOrderList'
        },
        roles: [
            2, 3, 4, 5, 6, 7, 8, 9, 10, 12, 13, 15, 16, 17, 18, 19, 20, 21, 22
        ]
    },
    {
        name: '我的',
        icon: 'my-circle',
        activeIcon: 'my-circle-fill',
        route: {
            type: 'switchTab',
            url: '/pages/tabbar/MineView/MineView'
        },
        roles: []
    }
]);

const { currentRoleId } = storeToRefs(useUserStore());

const list = computed(() => {
    const role = currentRoleId.value;
    return tabbarList.value.filter((item) => {
        if (item.roles.length === 0) {
            return true;
        } else {
            if (role && item.roles.includes(role)) {
                return true;
            }
        }
        return false;
    });
});

const beforeSwitch: TabbarSwitchBeforeSwitchFunc = (index: number) => {
    const item = list.value[index];
    uni.$uv.route(item.route as RouteOption);
    return false;
};

onShow(() => {
    /* #ifndef MP-WEIXIN */
    uni.hideTabBar({
        success() {
            console.log('成功');
        },
        fail(e) {
            console.log('失败', e);
        },
        complete() {}
    }); // 非小程序需隐藏原生tabbar
    /* #endif */
});
</script>

<template>
    <view class="customtabbar-container">
        <TnTabbar
            :model-value="modelValue"
            fixed
            :before-switch="beforeSwitch"
            :bg-color="cssVarObject['--bg-front']"
            :placeholder="false"
        >
            <TnTabbarItem
                v-for="(item, index) in list"
                :key="index"
                :name="item.name"
                :icon="item.icon"
                :active-icon="item.activeIcon"
                :text="item.name"
                :inactive-color="cssVarObject['--c-text2']"
                :active-color="cssVarObject['--c-primary']"
            />
        </TnTabbar>
    </view>
</template>

<style lang="scss" scoped></style>
